import {lazy, Suspense} from 'react';
import { Navigate } from 'react-router-dom';
//使用 lazy 函数加载组件. lazy 函数加载的组件, 会进行单独的打包
let HeroShow = lazy(() => {
  return import('../pages/HeroShow/HeroShow');
});
let HeroCom = lazy(() =>  import('../pages/HeroList/HeroCom'));
let Home = lazy(() =>  import('../pages/Home/Home'));
let News = lazy(() =>  import('../pages/News/News'));
let About = lazy(() =>  import('../pages/About/About'));
let Message = lazy(() =>  import('../pages/Message/Message'));
let NotFound = lazy(() =>  import('../pages/NotFound/NotFound'));
let IndexCom = lazy(() =>  import('../pages/Index/IndexCom'));

let routes = [
  {
    path: "/",
    element: <Suspense fallback={<h2>loading....</h2>}><IndexCom /></Suspense>,
  },
  {
    path: "/heros",
    element: <Suspense fallback={<h2>loading....</h2>}><HeroCom /></Suspense>,
  },
  {
    path: "/hero",
    element: <Suspense fallback={<h2>loading....</h2>}><HeroShow /></Suspense>,
  },
  {
    path: "/home",
    element: <Suspense fallback={<h2>loading....</h2>}><Home /></Suspense>,
    children: [
      {
        path: "/home/news",
        element: <Suspense fallback={<h2>loading....</h2>}><News /></Suspense>,
      },
      {
        path: "/home/message",
        element: <Suspense fallback={<h2>loading....</h2>}><Message /></Suspense>,
      },
      {
        index: true, 
        element: <Navigate to="/home/news" />
      }
    ],
  },
  {
    path: "/about",
    element: <Suspense fallback={<h2>loading....</h2>}><About /></Suspense>,
    caseSensitive:true,
  },
  {
    path: "*",
    element: <Suspense fallback={<h2>loading....</h2>}><NotFound /></Suspense>
  }
];

export default routes;
